import React, { useState, useEffect } from 'react';
import { 
  Brain, 
  Zap, 
  Shield, 
  Users, 
  BarChart3, 
  MessageSquare, 
  FileText, 
  Image, 
  Video, 
  Code, 
  ArrowRight, 
  Play, 
  CheckCircle, 
  Star,
  Sparkles,
  Cpu,
  Database,
  Cloud,
  Lock,
  Globe,
  Target,
  TrendingUp,
  X,
  Mail,
  Phone
} from 'lucide-react';

const ZhinvAI = () => {
  const [activeFeature, setActiveFeature] = useState(0);
  const [isVisible, setIsVisible] = useState(false);
  const [showVideoModal, setShowVideoModal] = useState(false);
  const [showContactModal, setShowContactModal] = useState(false);
  const [isVideoPlaying, setIsVideoPlaying] = useState(false);

  useEffect(() => {
    setIsVisible(true);
  }, []);

  const handleVideoPlay = () => {
    setIsVideoPlaying(true);
  };

  const handleVideoPause = () => {
    setIsVideoPlaying(false);
  };

  const features = [
    {
      icon: <FileText size={32} />,
      title: "故事创作",
      description: "使用DeepSeek R1创作精彩故事脚本，支持多种故事类型和创作模式",
      color: "blue",
      details: [
        "DeepSeek R1驱动",
        "多种故事类型",
        "简单/专业模式",
        "智能情节生成"
      ]
    },
    {
      icon: <Image size={32} />,
      title: "智能分析",
      description: "AI分析故事并生成图片提示词，使用即梦AI 3.1批量生成相关图片",
      color: "purple",
      details: [
        "故事智能分析",
        "图片提示词生成",
        "即梦AI 3.1驱动",
        "批量图片生成"
      ]
    },
    {
      icon: <MessageSquare size={32} />,
      title: "音频生成",
      description: "使用Qwen3-TTS-Flash提取故事关键内容，自动生成多种语音类型",
      color: "green",
      details: [
        "Qwen3-TTS-Flash",
        "多种语音类型",
        "智能内容提取",
        "高质量语音合成"
      ]
    },
    {
      icon: <Video size={32} />,
      title: "一键合成",
      description: "使用MoviePy自动将故事、图片、音频合成为完整视频",
      color: "yellow",
      details: [
        "MoviePy视频合成",
        "自动内容整合",
        "多种视频设置",
        "一键生成视频"
      ]
    }
  ];

  const capabilities = [
    {
      icon: <Cpu size={24} />,
      title: "多模态AI",
      description: "集成文本理解、图像生成、语音合成等多种AI技术"
    },
    {
      icon: <Database size={24} />,
      title: "故事理解",
      description: "深度理解故事结构、人物关系和情节发展"
    },
    {
      icon: <Cloud size={24} />,
      title: "云端制作",
      description: "强大的云端计算能力，快速生成高质量视频内容"
    },
    {
      icon: <Lock size={24} />,
      title: "原创保证",
      description: "确保生成内容的原创性，避免版权问题"
    }
  ];

  const useCases = [
    {
      category: "内容创作",
      icon: <FileText size={20} />,
      cases: [
        "短视频制作",
        "故事动画创作",
        "营销视频制作",
        "社交媒体内容"
      ]
    },
    {
      category: "教育培训",
      icon: <MessageSquare size={20} />,
      cases: [
        "教学视频制作",
        "课程内容动画",
        "知识科普视频",
        "培训材料制作"
      ]
    },
    {
      category: "企业宣传",
      icon: <Users size={20} />,
      cases: [
        "企业宣传片",
        "产品介绍视频",
        "品牌故事制作",
        "活动宣传视频"
      ]
    },
    {
      category: "娱乐创作",
      icon: <Video size={20} />,
      cases: [
        "微电影制作",
        "动画短片创作",
        "故事改编视频",
        "创意视频制作"
      ]
    }
  ];

  const stats = [
    { number: "50K+", label: "日生成视频", icon: <Video size={20} /> },
    { number: "10K+", label: "故事转视频", icon: <FileText size={20} /> },
    { number: "99.9%", label: "服务可用性", icon: <Shield size={20} /> },
    { number: "1000+", label: "创作者用户", icon: <Users size={20} /> }
  ];

  return (
    <div className="zhinv-ai-page">
      {/* Hero Section */}
      <section className="zhinv-hero">
        <div className="container">
          <div className={`hero-content ${isVisible ? 'animate-in' : ''}`}>
            <div className="hero-badge">
              <Sparkles size={16} />
              <span>织女AI - 故事转视频平台</span>
            </div>
            <h1>
              织女AI
              <span className="gradient-text">故事转视频</span>
            </h1>
            <p className="hero-description">
              多模态内容创作平台，从文→图→声→影，AI助力您的创意无限。
              支持故事创作、智能分析、音频生成、一键合成，让每个故事都能生动呈现。
              基于先进的AI技术，为创作者提供强大的视频制作能力。
            </p>
            <div className="hero-actions">
              <a href="https://zhinvai.novemcloud.com.cn/" target="_blank" rel="noopener noreferrer" className="hero-btn primary">
                立即体验
                <ArrowRight size={18} />
              </a>
              <button 
                className="hero-btn secondary"
                onClick={() => setShowVideoModal(true)}
              >
                <Play size={18} />
                播放案例
              </button>
            </div>
            <div className="hero-stats">
              {stats.map((stat, index) => (
                <div key={index} className="stat-item">
                  <div className="stat-icon">{stat.icon}</div>
                  <div className="stat-number">{stat.number}</div>
                  <div className="stat-label">{stat.label}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Features Section */}
      <section className="zhinv-features" id="features">
        <div className="container">
          <div className="section-header">
            <h2>核心功能</h2>
            <p>织女AI专注于故事转视频创作，提供从故事输入到视频输出的完整解决方案</p>
          </div>
          
          <div className="features-container">
            <div className="features-nav">
              {features.map((feature, index) => (
                <button
                  key={index}
                  className={`feature-nav-item ${activeFeature === index ? 'active' : ''}`}
                  onClick={() => setActiveFeature(index)}
                >
                  <div className="nav-icon">{feature.icon}</div>
                  <span>{feature.title}</span>
                </button>
              ))}
            </div>
            
            <div className="feature-content">
              <div className="feature-main">
                <div className="feature-icon">
                  {features[activeFeature].icon}
                </div>
                <h3>{features[activeFeature].title}</h3>
                <p>{features[activeFeature].description}</p>
                <div className="feature-details">
                  {features[activeFeature].details.map((detail, index) => (
                    <div key={index} className="detail-item">
                      <CheckCircle size={16} />
                      <span>{detail}</span>
                    </div>
                  ))}
                </div>
                <a href="https://zhinvai.novemcloud.com.cn/" target="_blank" rel="noopener noreferrer" className="feature-btn">
                  立即体验
                  <ArrowRight size={16} />
                </a>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Capabilities Section */}
      <section className="zhinv-capabilities">
        <div className="container">
          <div className="section-header">
            <h2>技术优势</h2>
            <p>基于先进的多模态AI技术，提供智能的故事理解和视频生成能力</p>
          </div>
          
          <div className="capabilities-grid">
            {capabilities.map((capability, index) => (
              <div key={index} className="capability-card">
                <div className="capability-icon">
                  {capability.icon}
                </div>
                <h3>{capability.title}</h3>
                <p>{capability.description}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Use Cases Section */}
      <section className="zhinv-use-cases">
        <div className="container">
          <div className="section-header">
            <h2>应用场景</h2>
            <p>织女AI在视频创作领域有着广泛的应用，助力各行业的故事视频制作</p>
          </div>
          
          <div className="use-cases-grid">
            {useCases.map((useCase, index) => (
              <div key={index} className="use-case-card">
                <div className="use-case-header">
                  <div className="use-case-icon">
                    {useCase.icon}
                  </div>
                  <h3>{useCase.category}</h3>
                </div>
                <ul className="use-case-list">
                  {useCase.cases.map((caseItem, caseIndex) => (
                    <li key={caseIndex}>
                      <Star size={14} />
                      <span>{caseItem}</span>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="zhinv-cta">
        <div className="container">
          <div className="cta-content">
            <h2>开始使用织女AI</h2>
            <p>立即体验织女AI的故事转视频功能，让您的每个故事都能生动呈现</p>
            <div className="cta-actions">
              <a href="https://zhinvai.novemcloud.com.cn/" target="_blank" rel="noopener noreferrer" className="cta-btn primary">
                免费试用
                <ArrowRight size={18} />
              </a>
              <button 
                className="cta-btn secondary"
                onClick={() => setShowContactModal(true)}
              >
                联系我们
              </button>
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer>
        <div className="container">
          <div className="footer-container">
            <div className="footer-brand">
              <div className="footer-logo">
                <div className="footer-logo-icon">
                  <Cloud size={24} />
                </div>
                <span className="footer-logo-text">九霄云阙</span>
              </div>
              <p className="footer-description">
                专业的云管理服务提供商，致力于为企业提供全方位的数字化转型解决方案。
              </p>
              <div className="footer-contact">
                <div className="contact-item">
                  <span>📧</span>
                  <span>contact@novemcloud.com.cn</span>
                </div>
                <div className="contact-item">
                  <span>📞</span>
                  <span>400-888-8888</span>
                </div>
                <div className="contact-item">
                  <span>📍</span>
                  <span>北京市朝阳区</span>
                </div>
              </div>
            </div>
            
            <div className="footer-column">
              <h3>产品服务</h3>
              <ul>
                <li><a href="/zhinv-ai">织女AI</a></li>
                <li><a href="http://embai.novemcloud.com.cn/">具身智能</a></li>
                <li><a href="http://cicd.novemcloud.com.cn/">CICD</a></li>
                <li><a href="#solutions">云基础架构</a></li>
              </ul>
            </div>
            
            <div className="footer-column">
              <h3>解决方案</h3>
              <ul>
                <li><a href="#solutions">云基础架构</a></li>
                <li><a href="#solutions">应用现代化</a></li>
                <li><a href="#solutions">安全与合规</a></li>
                <li><a href="#advantages">服务优势</a></li>
              </ul>
            </div>
            
            <div className="footer-column">
              <h3>支持</h3>
              <ul>
                <li><a href="#contact">联系我们</a></li>
                <li><a href="#help">帮助中心</a></li>
                <li><a href="#docs">技术文档</a></li>
                <li><a href="#status">服务状态</a></li>
              </ul>
            </div>
            
            <div className="footer-column">
              <h3>关于我们</h3>
              <ul>
                <li><a href="#about">公司介绍</a></li>
                <li><a href="#careers">招聘信息</a></li>
                <li><a href="#news">新闻动态</a></li>
                <li><a href="#partners">合作伙伴</a></li>
              </ul>
            </div>
          </div>
          
          <div className="copyright">
            <p>&copy; 2024 九霄云阙. 保留所有权利.</p>
            <p>
              <a href="#privacy">隐私政策</a> | 
              <a href="#terms">服务条款</a> | 
              <a href="#cookies">Cookie政策</a>
            </p>
          </div>
        </div>
      </footer>

      {/* 视频弹窗 */}
      {showVideoModal && (
        <div className="modal-overlay" onClick={() => setShowVideoModal(false)}>
          <div className="modal-content video-modal" onClick={(e) => e.stopPropagation()}>
            <button 
              className="modal-close"
              onClick={() => setShowVideoModal(false)}
            >
              <X size={24} />
            </button>
            
            <div className="modal-header">
              <div className="header-icon">
                <Video size={32} />
              </div>
              <h3>织女AI案例展示</h3>
              <p>观看织女AI如何将故事转化为精彩视频，体验多模态内容创作的魅力</p>
            </div>

            <div className="video-section">
              <div className="video-container">
                <div className="video-wrapper">
                  <video 
                    ref={(video) => {
                      if (video) {
                        video.addEventListener('play', handleVideoPlay);
                        video.addEventListener('pause', handleVideoPause);
                        video.addEventListener('ended', handleVideoPause);
                      }
                    }}
                    controls 
                    preload="metadata"
                    className="demo-video"
                    poster="/videos/zhinvai1-poster.jpg"
                    onLoadStart={() => console.log('视频开始加载')}
                    onCanPlay={() => console.log('视频可以播放')}
                  >
                    <source src="/videos/zhinvai1.mp4" type="video/mp4" />
                    您的浏览器不支持视频播放
                  </video>
                  {!isVideoPlaying && (
                    <div 
                      className="video-overlay"
                      onClick={(e) => {
                        e.preventDefault();
                        const video = e.target.closest('.video-wrapper').querySelector('video');
                        if (video) {
                          video.play();
                        }
                      }}
                    >
                      <div className="play-button">
                        <Play size={48} />
                      </div>
                    </div>
                  )}
                </div>
              </div>
              
              <div className="video-info">
                <div className="info-grid">
                  <div className="info-item">
                    <div className="info-icon">
                      <FileText size={20} />
                    </div>
                    <div className="info-content">
                      <h4>故事创作</h4>
                      <p>DeepSeek R1驱动</p>
                    </div>
                  </div>
                  <div className="info-item">
                    <div className="info-icon">
                      <Image size={20} />
                    </div>
                    <div className="info-content">
                      <h4>图片生成</h4>
                      <p>即梦AI 3.1驱动</p>
                    </div>
                  </div>
                  <div className="info-item">
                    <div className="info-icon">
                      <MessageSquare size={20} />
                    </div>
                    <div className="info-content">
                      <h4>音频合成</h4>
                      <p>Qwen3-TTS-Flash</p>
                    </div>
                  </div>
                  <div className="info-item">
                    <div className="info-icon">
                      <Video size={20} />
                    </div>
                    <div className="info-content">
                      <h4>视频合成</h4>
                      <p>MoviePy一键生成</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div className="modal-footer">
              <div className="footer-content">
                <div className="footer-text">
                  <h4>想要体验织女AI的强大功能？</h4>
                  <p>立即开始您的故事转视频创作之旅</p>
                </div>
                <div className="footer-actions">
                  <a 
                    href="https://zhinvai.novemcloud.com.cn/" 
                    target="_blank" 
                    rel="noopener noreferrer"
                    className="modal-btn primary"
                  >
                    <Sparkles size={16} />
                    立即体验
                    <ArrowRight size={16} />
                  </a>
                  <button 
                    className="modal-btn secondary"
                    onClick={() => setShowContactModal(true)}
                  >
                    <MessageSquare size={16} />
                    联系我们
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* 联系我们弹窗 */}
      {showContactModal && (
        <div className="modal-overlay" onClick={() => setShowContactModal(false)}>
          <div className="modal-content contact-modal" onClick={(e) => e.stopPropagation()}>
            <button 
              className="modal-close"
              onClick={() => setShowContactModal(false)}
            >
              <X size={24} />
            </button>
            <div className="modal-header">
              <h3>联系我们</h3>
              <p>我们很乐意为您提供帮助和支持</p>
            </div>
            <div className="contact-info">
              <div className="contact-item">
                <div className="contact-icon">
                  <Mail size={20} />
                </div>
                <div className="contact-details">
                  <h4>邮箱联系</h4>
                  <p>contact@novemcloud.com.cn</p>
                  <a href="mailto:contact@novemcloud.com.cn" className="contact-link">
                    发送邮件
                  </a>
                </div>
              </div>
              <div className="contact-item">
                <div className="contact-icon">
                  <Phone size={20} />
                </div>
                <div className="contact-details">
                  <h4>电话咨询</h4>
                  <p>400-888-8888</p>
                  <a href="tel:400-888-8888" className="contact-link">
                    立即拨打
                  </a>
                </div>
              </div>
              <div className="contact-item">
                <div className="contact-icon">
                  <MessageSquare size={20} />
                </div>
                <div className="contact-details">
                  <h4>在线客服</h4>
                  <p>工作日 9:00-18:00</p>
                  <a href="https://zhinvai.novemcloud.com.cn/" target="_blank" rel="noopener noreferrer" className="contact-link">
                    在线咨询
                  </a>
                </div>
              </div>
            </div>
            <div className="modal-footer">
              <p>或者直接体验织女AI平台</p>
              <a 
                href="https://zhinvai.novemcloud.com.cn/" 
                target="_blank" 
                rel="noopener noreferrer"
                className="modal-btn"
              >
                立即体验
                <ArrowRight size={16} />
              </a>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default ZhinvAI;
